<template>
  <div class="course">
    <div class="course-wrap">
      <div class="course-wrap-main w1200">
        <div class="main-select">
          <div class="main-select-item">
            <span class="type">分类：</span>
            <span class="tags" v-for="(item,i) in confs.class_type" :key="'ctype' + i" :class="{active: i.replace('a','') === query.class_type}" @click="setQuery('class_type', i.replace('a',''))" >{{item}}</span>
          </div>
          <div class="main-select-item">
            <span class="type">班型：</span>
            <span class="tags" v-for="(item,i) in confs.course_type" :key="'cutype' + i" :class="{active: i.replace('a','') === query.course_type}" @click="setQuery('course_type', i.replace('a',''))" >{{item}}</span>
          </div>
        </div>
        <div class="main-tab">
        <div class="main-tab-item">
          <div class="item-l">
            <span v-for="(item,i) in confs.sort" :key="'sort' + i" :class="{on: i === query.sort}" @click="setQuery('sort', i)" >{{item}}</span>
          </div>
          <div class="item-r" v-if="userInfo.username && userInfo.username !== ''">
            <a-checkbox @change="onChange" v-model="has_course">
              隐藏已参加课程
            </a-checkbox>
          </div>
        </div>
      </div>
      <div class="main-list" :class="{'no-list': isNone}">
        <template v-if="dataList.length > 0">
            <div class="main-list-item" v-for="(item, i) in dataList" :key="i" @click="handleDetail(item)">
            <div class="img">
              <img :src="item.pic" />
            </div>
            <h3 class="title">{{item.title}}</h3>
            <p class="num"><img src="@/assets/home/course-list-icon.png" />{{item.num}}</p>
            <p class="desc">{{item.desc}}</p>
          </div>
        </template>
        <div class="no-class"  v-if="isNone">
          <img src="@/assets/home/no-class.png" />
          <p>该分类下暂无“<span>搜索的关键词</span>”相关课程，请换一个关键词试试~</p>
        </div>
        </div>
      <div class="main-page" v-if="dataList.length > 0 && totalPage > 1" :data-s="totalPage">
        <template>
          <a-pagination v-model="query.page" :total="total" show-less-items />
        </template>
      </div>
     </div>
      <!--end-->
    </div>
    <Footer></Footer>
  </div>
</template>
<script>
import {
  Checkbox,
  Pagination
} from "ant-design-vue"
import {
  postForm,
} from "@/services"
import Footer from "@/components/layout/Footer"
import mTypes from "@/store/mutationsTypes"
import { mapState, mapMutations } from "vuex"
export default {
  components: {
    Footer,
    'a-pagination': Pagination,
    'a-checkbox': Checkbox
  },
  data () {
    return {
      dataList: [],
      total: 0,
      totalPage: 0,
      pageSize: 10,
      confs: {
        sort: { '0': '综合', '1': '更新时间', '2': '最热', '3': '价格' },
        class_type: { 'a': '全部', '0a': '单词速记', '1a': '超级阅读', '2a': '逆向语法', '3a': '格式塔作文', '4a': '使用教程', '5a': '其他' },
        course_type: { 'a': '全部', '0a': '一对一', '1a': '小班课', '2a': '直播课', '3a': '录播课', '4a': '公开课' }
      },
      query: {
        page: 1,
        search: '',
        has_course: '0',
        sort: '0',
        class_type: '',
        course_type: ''
      },
      has_course: false,
      isNone: false
    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.userInfo
    })
  },
  watch: {
    query: {
      handler (newVal, oldVal) {
        this.loadData()
      },
      immediate: false,
      deep: true
    },
    $route (to, from) {
      console.log(to)
      if (to.query.search) {
        this.query.search = this.$route.query.search
      } else {
        console.log(999999)
        this.query.search = ''
      }
    }
  },
  created () {
    console.log(1344)
    if (this.$route.query.search) {
      this.query.search = this.$route.query.search
    } else {
      this.loadData()
    }
  },
  methods: {
    ...mapMutations([mTypes.loginModal]),
    getSearch () {
      let search = ''
      alert(window.location.href)
      if (window.location.href.indexOf('?') > -1) {
        search = window.location.href.split('?')[1].split('=')[1]
        console.log(search + '^&^&')
      }
    },
    loadData () {
      this.isNone = false
      postForm('/usercenter/courseindex', this.query).then((r) => {
        if (r.code == 1) {
          if (r.data.lists.length === 0) {
            this.isNone = true
            this.dataList = []
            return
          }
          this.total = r.data.total
          this.totalPage = Math.ceil(r.data.total / this.pageSize)
          console.log(this.totalPage)
          this.dataList = r.data.lists
        }
      })
    },
    onChange (e) {
      let query = {}
      query['has_course'] = this.has_course ? '1' : '0'
      this.query = Object.assign({}, this.query, query)
    },
    setQuery (key, i) {
      this.query.page = 1
      let query = {}
      query[key] = i
      this.query = Object.assign({}, this.query, query)
    },
    handleDetail (item) {
      this.$router.push({
        path: '/courseDetail',
        query: {
          id: item.id
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.course {
  margin-top: 30px;
  &-wrap {
    min-height: 786px;
  }
  .course-wrap-main {
    min-width: 1200px;
    // width: 62.5%;
    margin: 0 auto;
  }
  .main-select {
    background: #F2F7F6;
    border-radius: 6px;
    padding: 29px 30px;
    &-item {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      .type {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #24272B;
        margin-right: 5px;
      }
      .active {
        color: #fff !important;
        background: #07997F;
        border-radius: 15px;
      }
      .tags {
        cursor: pointer;
        display: block;
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #24272B;
        height: 30px;
        line-height: 30px;
        margin-right: 27px;
        padding: 0 14px;
        cursor: pointer;
      }
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
  .main-tab {
    margin-top: 20px;
    padding-left: 30px;
    border-bottom: 1px solid #E0E0E0;
    padding-bottom: 6px;
    &-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .item-l {
        cursor: pointer;
        display: flex;
        align-items: center;
        .on {
          color: #0C9B82;
          &::after {
            position: absolute;
            left: 50%;
            bottom: -7px;
            transform: translateX(-50%);
            display: block;
            content: '';
            width: 30px;
            height: 2px;
            background: #07997F;
          }
        }
        span {
          position: relative;
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #24272B;
          margin-right: 40px;
          cursor: pointer;
        }
      }
      .item-r {
        display: flex;
        align-items: center;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(0,0,0,.65);
        span {
          display: inline-block;
          width: 16px;
          height: 16px;
          border: 1px solid #eee;
          border-radius: 3px;
          margin-right: 5px;
        }
        img {
          width: 16px;
          height: 16px;
          margin-right: 8px;
        }
      }
    }
  }
  .no-list {
    justify-content: center;
  }
  .main-list {
    display: flex;
    flex-wrap: wrap;
    min-height: 500px;
    margin-top: 20px;
    .no-class {
      text-align: center;
      margin-top: 140px;
      img {
        width: 200px;
        height: 156px;
      }
      p {
        font-size: 20px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        line-height: 26px;
        color: #666666;
        margin-top: 20px;
        span {
          color: #DD7742;
        }
      }
    }
    &-item {
      margin-right: 20px;
      width: calc((100% - 80px) / 5);
      margin-bottom: 14px;
      transition: all .3s ease-out;
      cursor: pointer;
      &:hover {
        .img {
          box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
        }
        .title {
          color: #07997F !important;
        }
        .desc {
          color: #333 !important;
        }
      }
      .img {
          width: 224px;
          height: 126px;
          border-radius: 6px;
          overflow: hidden;
          transition: all .3s ease-out;
          img {
            width: 100%;
            height: auto;
            display: block;
          }
        }
      .title {
        font-size: 20px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #333333;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-top: 10px;
        margin-bottom: 5px;
        transition: all .3s ease-out;
      }
      .num {
        display: flex;
        align-items: center;
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        line-height: 20px;
        color: #07997F;
        margin-bottom: 5px;
        text-align: left;
        img {
          width: 14px;
          height: 14px;
        }
      }
      .desc {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        line-height: 20px;
        color: #BCBCBC;
        height: 40px;
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        transition: all .3s ease-out;
      }
      &:nth-child(5n) {
        margin-right: 0;
      }
    }
  }
  .main-page {
    text-align: center;
    margin-top: 50px;
    margin-bottom: 60px;
  }
}
/deep/.ant-pagination-prev,/deep/.ant-pagination-next {
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-color: #EFEFEF;
  border-radius: 6px;
  a {
    border-radius: 6px;
  }
  // i {
  //   display: none;
  // }
}
/deep/.ant-pagination-item {
  width: 30px;
  height: 30px;
  min-width: 30px;
  text-align: center;
  border-radius: 6px;
  a {
    display: inline-block;
    line-height: 29px;
    padding: 0;
  }
}
/deep/.ant-pagination-item-active {
  background: #27BFA3;
  border-color: none;
  border: none;
  a {
    color: #fff;
    line-height: 30px;
  }
}
</style>
